<template>
    <!-- 头部部分 -->
    <el-page-header :icon="Fold"back-text="日志">
        <template #content>
        <span class="text-large font-600 mr-3"> 日志 </span>
        </template>
        <div class="right">
            <el-avatar
                :icon="UserFilled"
            />
            <span>15210418591</span>
        </div>
        <div class="white"></div>
    </el-page-header>
    <!-- 输入框 -->
    <div class="search">
            <el-input
                v-model="searchName"
                placeholder="按姓名搜索"
                :prefix-icon="Search"
            /> 
         <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
          <el-button type="info" :icon="Refresh" style="margin-left:898px;border-radius: 8px;margin-top: 55px;
    transform: scale(1);" @click="handleRefresh">刷新</el-button>
    </div>
    <!-- table表格 -->
        <table class="log-table">
        <thead>
            <tr>
            <th >操作人</th>
            <th >操作</th>
            <th >备注</th>
            <th >操作时间</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in logData" :key="index">
            <td>{{ item.nickname }}</td>
            <td>{{ item.operation }}</td>
            <td>{{ item.note }}</td>
            <td>{{ item.applyTime }}</td>
            </tr>
        </tbody>
    </table>
      <!-- 分页区域 -->
        <div class="footer">
            <span>共{{totalSize}}条</span>
             <div class="flex flex-wrap items-center">
                <el-dropdown>
                <el-button type="primary">
                  {{pageSize}}条/页<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                    <el-dropdown-item></el-dropdown-item>
                    </el-dropdown-menu>
                </template>
             </el-dropdown>
             </div>
             <el-pagination background layout="prev, pager, next" :total="3" />
             前往<div class="btn">1</div>页
        </div>
</template>

<script setup>
    import { Fold,Search,Refresh, UserFilled,ArrowDown} from '@element-plus/icons-vue';
     import { reactive,ref,onMounted } from 'vue'; 
     import {
       getBackendList
    } from '@/components/api/BackendLog'
    // 搜索条件
    const searchName = ref(''); // 按姓名搜索

    const pageIndex = ref(1);    // 当前页
    const pageSize = ref(10);   // 每页条数
    const totalSize = ref(0);   // 总条数
    const logData =ref([]);

    const handleSearch = () => {
        pageIndex.value = 1; 
        fetchData(); 
    };

const handleRefresh = () => {
  searchName.value = ''; 
  searchOperator.value = '';
  pageIndex.value = 1;
  fetchData();
};
    const fetchData = () => {
    const requestData = {
        pageIndex: pageIndex.value,
        pageSize: pageSize.value,
        nickname: searchName.value, 
    };
    getBackendList(requestData).then(res => {
        if (res.code === 200) {
        logData.value = res.dataset.list;
        totalSize.value = res.dataset.totalSize;
        pageIndex.value = res.dataset.pageIndex;
        pageSize.value = res.dataset.pageSize;
        }
    });
};

onMounted(() => {
  fetchData();
});     
</script>

<style lang="less" scoped>
    .right{
        width: 187px;
        height: 39px;
        float: right;
        margin-top: -40px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .el-avatar--icon{
            width: 42px;
            height: 35px;
        }
    }
    .search{
        display: flex;
        .el-input{
            width: 250px;
            height: 30px;
            margin-top: 20px;
        }
        .el-select{
            width: 250px;
            height: 30px;
            margin-top: 20px;
            margin-left: 20px;
        }
        .el-button{
            width: 60px;
            height:30px ;
            margin-top: 20px;
            margin-left: 20px;
        }
        }
        .cell{
            border: 1px solid #ccc;
        }
         .log-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            margin-top: 13px;
            color: #606266;
            }

        .log-table th, .log-table td {
            border: 1px solid #ccc;
            padding: 19px 20px;
            text-align: left;
            font-size:20px;
            }
        .log-table th {
            background-color: #f2f2f2;
            }
        /* 设置各列宽度比例 */
        .log-table th:nth-child(1),
        .log-table th:nth-child(3),
        .log-table th:nth-child(4) {
            width: 15%;
            font-size:20px;
        }
        
        .log-table th:nth-child(2) {
            width: 45%; 
            font-size: 20px;
        }
    .footer{
            width:682px;
            height: 36px;
            float: right;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            .el-button--primary{
                background-color: #fff;
                color: #333;
            }
            .el-pager{
                font-size: 15px;
            }
            .btn{
                width: 38px;
                height: 20px;
                border: 1px solid #ccc;
                display: flex;
                justify-content: center;
                align-items: center;
            }
    }
</style>